import React, { useState, useEffect } from 'react';

import { CloseOutlined } from '@ant-design/icons';
import './Tabs.less';
import { Tabs } from 'antd';
import {
  Menu,
  Item,
  Separator,
  Submenu,
  useContextMenu,
} from 'react-contexify';
import 'react-contexify/dist/ReactContexify.css';

export default function (props) {
  const [tabList, setTabList] = useState([]);
  const { TabPane } = Tabs;

  useEffect(() => {
    setTabList(props.arr);
  }, [props]);
  const MENU_ID = 'rightMenu';
  const { show } = useContextMenu({
    id: MENU_ID,
  });

  const closeRight = (e) => {
    let a = tabList.findIndex((item) => {
      return item.title == e.triggerEvent.toElement.innerText;
    });
    let b = [...tabList];
    b.splice(a + 1, 1);
    setTabList(b);
    console.log(b);
  };
  const closeLeft = (e) => {
    let a = tabList.findIndex((item) => {
      return item.title == e.triggerEvent.toElement.innerText;
    });
    if (a !== 0) {
      let b = [...tabList];
      b.splice(a - 1, 1);
      setTabList(b);
    }
  };
  const closeOther = (e) => {
    let a = tabList.find((item) => {
      return item.title == e.triggerEvent.toElement.innerText;
    });
    setTabList([a]);
    console.log(a);
  };
  function displayMenu(e) {
    console.log(e.target.id);
    if (e.target.id) {
      show(e);
    }
  }
  const iconClick = (e) => {
    let a = tabList.findIndex((item) => {
      return item.key == e;
    });
    let b = [...tabList];
    b.splice(a, 1);
    setTabList(b);
  };

  const tab = (e) => {
    return (
      <div className="path-item">
        <span id="pcsa">{e.title}</span>
        <CloseOutlined
          style={{ marginLeft: '10px', color: '#a3a3a3', fontSize: '12px' }}
          onClick={() => {
            iconClick(e.key);
          }}
        />
      </div>
    );
  };
  return (
    <div>
      <div id="Index">
        <Tabs defaultActiveKey="1" onContextMenu={displayMenu}>
          {tabList.map((item) => {
            return (
              <TabPane tab={tab(item)} key={item.key}>
                {item.name()}
              </TabPane>
            );
          })}
        </Tabs>

        <Menu id={MENU_ID} animation="fade">
          <Item
            onClick={() => {
              location.reload();
            }}
          >
            刷新
          </Item>
          <Item
            onClick={(e) => {
              closeRight(e);
            }}
          >
            关闭右侧
          </Item>
          <Item
            onClick={(e) => {
              closeLeft(e);
            }}
          >
            关闭左侧
          </Item>
          <Item
            onClick={(e) => {
              closeOther(e);
            }}
          >
            关闭其他
          </Item>
        </Menu>
      </div>
    </div>
  );
}
